<template>
  <el-form ref="userRegisterForm" :model="userRegisterForm" :rules="userRegisterRules " class="register-form" autocomplete="on" label-position="left">
    <el-form-item prop="company_code">
      <span class="svg-container">
        <i class="el-icon-office-building" />
      </span>
      <el-input
        ref="company_code"
        v-model="userRegisterForm.company_code"
        placeholder="请输入公司代码"
        name="company_code"
        type="text"
        tabindex="1"
        autocomplete="on"
        @blur="companyCodeBlur"
      />
    </el-form-item>

    <el-form-item prop="nickname">
      <span class="svg-container">
        <i class="el-icon-user" />
      </span>
      <el-input
        ref="nickname"
        v-model="userRegisterForm.nickname"
        placeholder="请输入用户昵称"
        name="nickname"
        type="text"
        tabindex="2"
        autocomplete="on"
        @blur="nicknameBlur"
      />
    </el-form-item>

    <el-form-item prop="realname">
      <span class="svg-container">
        <i class="el-icon-user-solid" />
      </span>
      <el-input
        ref="realname"
        v-model="userRegisterForm.realname"
        placeholder="请输入真实姓名"
        name="realname"
        type="text"
        tabindex="3"
        autocomplete="on"
      />
    </el-form-item>

    <el-form-item prop="phone">
      <span class="svg-container">
        <i class="el-icon-mobile-phone" />
      </span>
      <el-input
        ref="phone"
        v-model="userRegisterForm.phone"
        placeholder="请输入电话号码"
        name="phone"
        type="text"
        tabindex="4"
        autocomplete="on"
        @change="phoneChange"
      />
    </el-form-item>

    <el-form-item prop="id_card">
      <span class="svg-container">
        <i class="el-icon-bank-card" />
      </span>
      <el-input
        ref="id_card"
        v-model="userRegisterForm.id_card"
        placeholder="请输入身份证号码"
        name="id_card"
        type="text"
        tabindex="5"
        autocomplete="on"
      />
    </el-form-item>

    <el-form-item prop="password">
      <span class="svg-container">
        <svg-icon icon-class="password" />
      </span>
      <el-input
        ref="password"
        v-model="userRegisterForm.password"
        placeholder="请输入用户密码"
        name="password"
        type="text"
        tabindex="6"
        autocomplete="on"
      />
    </el-form-item>

    <el-form-item>
      <div style="height: 80px;">
        <graph-verify-code GraphVerifyCodeId="UserRegisterGraph" @GraphVerifyCodeValue="GraphVerifyCodeValue"></graph-verify-code>
      </div>
    </el-form-item>

    <el-form-item prop="graph_verify_code">
      <span class="svg-container">
        <i class="el-icon-picture" />
      </span>
      <el-input
        ref="graph_verify_code"
        v-model="userRegisterForm.graph_verify_code"
        placeholder="请输入图片验证码"
        name="graph_verify_code"
        type="text"
        tabindex="7"
        autocomplete="on"
      />
    </el-form-item>

    <el-button type="text" style="width:100%;margin-bottom:30px;" @click.native.prevent="verifyCodeCountdownHandle" :disabled="isVerifyCode">
      {{ downCounterShow }}
    </el-button>

    <el-form-item prop="verify_code">
      <span class="svg-container">
        <i class="el-icon-message" />
      </span>
      <el-input
        ref="verify_code"
        v-model="userRegisterForm.verify_code"
        placeholder="请输入手机验证码"
        name="verify_code"
        type="text"
        tabindex="8"
        autocomplete="on"
      />
    </el-form-item>

    <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleUserRegister">
      用户注册
    </el-button>
  </el-form>
</template>

<script>
import { validCompanyName, validCompanyCode, validPhone, validVerifyCode, validIdCard, validPassword, validGraphVerifyCode } from '@/utils/validate'
import GraphVerifyCode from '@/components/GraphVerifyCode'
// import { companyCodeIfRegisterApi } from '@/api/company.js'
// import { verifyCodeCreateApi } from '@/api/verify-code.js'
// import { userNicknameIfRegisterApi, userCreateApi, userPhoneIfRegisterApi } from '@/api/user.js'
import { messageMethod } from '@/methods/messageTipsMethod.js'

export default {
  name: 'UserRegisterForm',
  components: { GraphVerifyCode },
  data () {
    const validateCompanyCode = (rule, value, callback) => {
      if (!validCompanyCode(value)) {
        callback(new Error('请输入正确的公司代码，长度为12位'))
      } else {
        callback()
      }
    }
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入正确的用户名称'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('请输入11位数的电话号码'))
      } else {
        callback()
      }
    }
    const validateIdCard = (rule, value, callback) => {
      if (!validIdCard(value)) {
        callback(new Error('请输入18位数字的二代身份证号码'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error('请输入8——16位的数字和字母的密码'))
      } else {
        callback()
      }
    }
    const validateVerifyCode = (rule, value, callback) => {
      if (!validVerifyCode(value)) {
        callback(new Error('请输入6位纯数字的验证码'))
      } else {
        callback()
      }
    }
    const validateGraphVerifyCode = (rule, value, callback) => {
      if (!validGraphVerifyCode(value)) {
        callback(new Error('请输入图形验证码只有4位'))
      } else {
        callback()
      }
    }
    return {
      userRegisterForm: {
        company_code: '',
        nickname: '',
        realname: '',
        phone: '',
        id_card: '',
        password: '',
        verify_code: '',
        graph_verify_code: ''
      },
      userRegisterRules: {
        company_code: [{ required: true, trigger: 'blur', validator: validateCompanyCode }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        id_card: [{ required: true, trigger: 'blur', validator: validateIdCard }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        verify_code: [{ required: true, trigger: 'blur', validator: validateVerifyCode }],
        graph_verify_code: [{ required: true, trigger: 'blur', validator: validateGraphVerifyCode }]
      },
      downCounterShow: '获取手机验证码',
      isVerifyCode: false,
      userRegisterGraphVerifyCode: '',
      loading: false,
      showDialog: false,
      // 能否提交
      isSubmit: false,
    }
  },
  methods: {
    companyCodeBlur () {
      if (validCompanyCode(this.userRegisterForm.company_code)) {
        // companyCodeIfRegisterApi(this.userRegisterForm.company_code)
        //   .then(res => {
        //     // console.log('公司代码正常：', res)
        //     if (res.data.length <= 0) {
        //       messageMethod(this, '公司代码并不存在', 'warning', 0)
        //       this.isSubmit = false
        //     } else {
        //       this.isSubmit = true
        //     }
        //   })
        //   .catch(res => {
        //     this.isSubmit = false
        //   })
      } else {
        this.isSubmit = false
      }
    },
    nicknameBlur () {
      if (this.userRegisterForm.nickname.length > 0) {
        // userNicknameIfRegisterApi(this.userRegisterForm.nickname)
        //   .then(res => {
        //     // console.log('用户昵称成功：', res)
        //     if (res.data.length > 0) {
        //       messageMethod(this, '用户昵称已存在, 请修改')
        //       this.isSubmit = false
        //     } else {
        //       this.isSubmit = true
        //     }
        //   })
        //   .catch(res => {
        //     this.isSubmit = false
        //   })
      } else {
        this.isSubmit = false
      }
    },
    phoneChange(phone) {
      if (phone.length === 11) {
        // userPhoneIfRegisterApi(phone)
        //   .then(res => {
        //     // console.log('用户昵称成功：', res)
        //     if (res.data.length > 0) {
        //       messageMethod(this, phone + '号码已注册, 请直接登录', 'warning')
        //       // 将手机号码数据清空
        //       this.userRegisterForm.phone = ''
        //     } else {
        //     }
        //   })
        //   .catch(res => {
        //     this.isSubmit = false
        //   })
      }
    },
    verifyCodeCountdownHandle () {
      /* 验证码倒计时
       * 180秒后才能再次获取手机验证码 */
      let phone = this.userRegisterForm.phone
      if (validPhone(phone)) {
        // verifyCodeCreateApi ({
        //   'phone': phone
        // })
        //   .then(res => {
        //     this.timeCount = 0
        //     messageMethod(this, '手机验证码为：' + res.data.verify_code, 'success')
        //     this.isSubmit = true
        //   })
        //   .catch(res => {
        //     this.isSubmit = false
        //   })
        // let timeCount = 180
        // this.isVerifyCode = true
        // setInterval(() => {
        //   if (timeCount > 0) {
        //     timeCount -= 1
        //     this.downCounterShow = '重新获取验证码时间：' + timeCount + '秒'
        //   } else {
        //     this.downCounterShow = '获取手机验证码'
        //   }
        // }, 1000)
      } else {
        this.isSubmit = false
      }
    },
    GraphVerifyCodeValue (codeValue) {
      this.userRegisterGraphVerifyCode = codeValue
    },
    handleUserRegister() {
      this.$refs.userRegisterForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.userRegisterForm.graph_verify_code === this.userRegisterGraphVerifyCode || this.userRegisterForm.graph_verify_code.toLocaleLowerCase() === this.userRegisterGraphVerifyCode) {
            this.userRegisterForm['username'] = this.userRegisterForm['phone']
            // userCreateApi(this.userRegisterForm)
            //   .then(res => {
            //     this.loading = false
            //     // console.log('用户注册成功：', res)
            //     messageMethod(this, '用户注册成功，请登录', 'success')
            //     // 跳转到登录界面
            //     // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            //     this.$router.push('/login')
            //   })
            //   .catch(res => {
            //     this.isSubmit = false
            //     this.loading = false
            //   })
          } else {
            messageMethod(this, '图形验证码错误', 'warning')
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped>
</style>
